<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Flow & Team Collaboration</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
            color: #006064;
            padding: 30px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.85);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0, 150, 136, 0.15);
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: #00796b;
            font-weight: 600;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #004d40;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 30px;
        }
        
        .section {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 150, 136, 0.1);
            border: 1px solid rgba(0, 150, 136, 0.1);
        }
        
        .section-title {
            font-size: 1.6rem;
            margin-bottom: 25px;
            text-align: center;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(0, 150, 136, 0.2);
            color: #00796b;
            font-weight: 600;
        }
        
        .demo-steps {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .demo-step {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px;
            background: rgba(178, 235, 242, 0.3);
            border-radius: 10px;
            transition: transform 0.3s ease, background 0.3s ease;
            border-left: 4px solid #00796b;
        }
        
        .demo-step:hover {
            transform: translateY(-3px);
            background: rgba(178, 235, 242, 0.5);
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #00796b;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        
        .step-content {
            flex: 1;
        }
        
        .step-title {
            font-size: 1.2rem;
            margin-bottom: 8px;
            color: #00796b;
            font-weight: 600;
        }
        
        .step-desc {
            font-size: 0.95rem;
            color: #004d40;
            line-height: 1.5;
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        .team-member {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px;
            background: rgba(178, 235, 242, 0.3);
            border-radius: 10px;
            transition: transform 0.3s ease, background 0.3s ease;
            border-left: 4px solid #00796b;
        }
        
        .team-member:hover {
            transform: translateY(-3px);
            background: rgba(178, 235, 242, 0.5);
        }
        
        .member-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #00796b;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
        }
        
        .member-content {
            flex: 1;
        }
        
        .member-name {
            font-size: 1.2rem;
            margin-bottom: 8px;
            color: #00796b;
            font-weight: 600;
        }
        
        .member-role {
            font-size: 0.95rem;
            color: #004d40;
            line-height: 1.5;
        }
        
        .demo-highlight {
            text-align: center;
            margin-top: 30px;
            padding: 20px;
            background: rgba(0, 150, 136, 0.1);
            border-radius: 10px;
            border: 2px dashed #00796b;
        }
        
        .highlight-text {
            font-size: 1.3rem;
            font-weight: 600;
            color: #00796b;
            margin-bottom: 10px;
        }
        
        .highlight-subtext {
            font-size: 1rem;
            color: #004d40;
        }
        
        .visual-aid {
            margin-top: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            border-left: 4px solid #00796b;
        }
        
        .demo-flow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 15px 0;
            padding: 10px;
        }
        
        .flow-item {
            text-align: center;
            padding: 12px 15px;
            background: rgba(0, 150, 136, 0.2);
            border-radius: 8px;
            min-width: 100px;
            font-weight: bold;
            color: #00796b;
        }
        
        .flow-arrow {
            font-size: 1.5rem;
            color: #00796b;
        }
        
        .collaboration-chart {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin: 15px 0;
        }
        
        .chart-item {
            padding: 12px 20px;
            background: rgba(0, 150, 136, 0.2);
            border-radius: 8px;
            text-align: center;
            width: 80%;
            font-weight: bold;
            color: #00796b;
            border: 1px solid rgba(0, 150, 136, 0.3);
        }
        
        .chart-arrow {
            width: 2px;
            height: 20px;
            background: rgba(0, 150, 136, 0.5);
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid rgba(0, 150, 136, 0.2);
            font-size: 0.9rem;
            color: #004d40;
        }
        
        @media (max-width: 900px) {
            .content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Demo Flow & Team Collaboration</h1>
            <div class="subtitle">Live Demonstration Plan and Team Member Contributions</div>
        </div>
        
        <div class="content">
            <!-- Demo Flow Section -->
            <div class="section">
                <div class="section-title">LIVE DEMONSTRATION PLAN</div>
                <div class="demo-steps">
                    <div class="demo-step">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <div class="step-title">Game Setup & UI</div>
                            <div class="step-desc">
                                Show the game initialization, champion selection, and user interface.
                            </div>
                            
                            <div class="visual-aid">
                                <div class="demo-flow">
                                    <div class="flow-item">Game Start</div>
                                    <div class="flow-arrow">→</div>
                                    <div class="flow-item">Champion Select</div>
                                    <div class="flow-arrow">→</div>
                                    <div class="flow-item">Main UI</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="demo-step">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <div class="step-title">Card Playing Mechanics</div>
                            <div class="step-desc">
                                Demonstrate playing different card types and managing resources.
                            </div>
                            
                            <div class="visual-aid">
                                <div class="demo-flow">
                                    <div class="flow-item">Draw Card</div>
                                    <div class="flow-arrow">→</div>
                                    <div class="flow-item">Play Card</div>
                                    <div class="flow-arrow">→</div>
                                    <div class="flow-item">Effect Resolves</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="demo-step">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <div class="step-title">Combat System</div>
                            <div class="step-desc">
                                Show minion combat, damage calculation, and board interactions.
                            </div>
                            
                            <div class="visual-aid">
                                <div class="demo-flow">
                                    <div class="flow-item">Attack Declaration</div>
                                    <div class="flow-arrow">→</div>
                                    <div class="flow-item">Damage Calculation</div>
                                    <div class="flow-arrow">→</div>
                                    <div class="flow-item">Board Update</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="demo-step">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <div class="step-title">Champion Skills</div>
                            <div class="step-desc">
                                Demonstrate unique champion abilities and strategic usage.
                            </div>
                            
                            <div class="visual-aid">
                                <div class="demo-flow">
                                    <div class="flow-item">Skill Available</div>
                                    <div class="flow-arrow">→</div>
                                    <div class="flow-item">Activate Skill</div>
                                    <div class="flow-arrow">→</div>
                                    <div class="flow-item">Cooldown</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="demo-highlight">
                    <div class="highlight-text">Ready for Live Demo!</div>
                    <div class="highlight-subtext">Interactive demonstration of League of ChangAn gameplay</div>
                </div>
            </div>
            
            <!-- Team Collaboration Section -->
            <div class="section">
                <div class="section-title">TEAM CONTRIBUTIONS</div>
                <div class="team-grid">
                    <div class="team-member">
                        <div class="member-avatar">A</div>
                        <div class="member-content">
                            <div class="member-name">Echo</div>
                            <div class="member-role">
                                Core Game Engine & Turn System Logic
                            </div>
                            
                            <div class="visual-aid">
                                <div class="collaboration-chart">
                                    <div class="chart-item">Game State Management</div>
                                    <div class="chart-arrow"></div>
                                    <div class="chart-item">Turn Phase Logic</div>
                                    <div class="chart-arrow"></div>
                                    <div class="chart-item">Core Mechanics</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="team-member">
                        <div class="member-avatar">B</div>
                        <div class="member-content">
                            <div class="member-name">Lucy</div>
                            <div class="member-role">
                                Card System Design & Combat Mechanics
                            </div>
                            
                            <div class="visual-aid">
                                <div class="collaboration-chart">
                                    <div class="chart-item">Card Class Hierarchy</div>
                                    <div class="chart-arrow"></div>
                                    <div class="chart-item">Combat Resolution</div>
                                    <div class="chart-arrow"></div>
                                    <div class="chart-item">Effect System</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="team-member">
                        <div class="member-avatar">C</div>
                        <div class="member-content">
                            <div class="member-name">Betty</div>
                            <div class="member-role">
                                UI Implementation & User Interaction
                            </div>
                            
                            <div class="visual-aid">
                                <div class="collaboration-chart">
                                    <div class="chart-item">User Interface</div>
                                    <div class="chart-arrow"></div>
                                    <div class="chart-item">Input Handling</div>
                                    <div class="chart-arrow"></div>
                                    <div class="chart-item">Visual Feedback</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="team-member">
                        <div class="member-avatar">D</div>
                        <div class="member-content">
                            <div class="member-name">Carry</div>
                            <div class="member-role">
                                Resource Management & Testing
                            </div>
                            
                            <div class="visual-aid">
                                <div class="collaboration-chart">
                                    <div class="chart-item">Resource System</div>
                                    <div class="chart-arrow"></div>
                                    <div class="chart-item">Testing & Debugging</div>
                                    <div class="chart-arrow"></div>
                                    <div class="chart-item">Documentation</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="demo-highlight">
                    <div class="highlight-text">Team Collaboration</div>
                    <div class="highlight-subtext">Each member contributed to different aspects of the project</div>
                </div>
            </div>
        </div>
        
        <div class="footer">
            League of ChangAn - Python OOP Project | Demo Flow & Team Collaboration
        </div>
    </div>
</body>
</html>